﻿<UserControl
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
	mc:Ignorable="d"
	x:Class="WPFDemo.SphereControl"
	x:Name="UserControl"
	d:DesignWidth="50" d:DesignHeight="50">
	<UserControl.Resources>
		<Storyboard x:Key="MouseOver">
			<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
				<SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
				<SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="1.3" KeySpline="0,0,0.5,1"/>
			</DoubleAnimationUsingKeyFrames>
			<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
				<SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
				<SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="1.3" KeySpline="0,0,0.5,1"/>
			</DoubleAnimationUsingKeyFrames>
			<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Ellipse" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Offset)">
				<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
				<SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="0.231"/>
			</DoubleAnimationUsingKeyFrames>
			<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Ellipse" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Offset)">
				<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0.312"/>
				<SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="0.729"/>
			</DoubleAnimationUsingKeyFrames>
		</Storyboard>
        <Storyboard x:Key="MouseLeave">
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
                <SplineDoubleKeyFrame KeyTime="00:00:00.5" Value="1" KeySpline="0,0,0.5,1"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
                <SplineDoubleKeyFrame KeyTime="00:00:00.5" Value="1" KeySpline="0,0,0.5,1"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Ellipse" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Offset)">
                <SplineDoubleKeyFrame KeyTime="00:00:00.5" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Ellipse" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Offset)">
                <SplineDoubleKeyFrame KeyTime="00:00:00.5" Value="0.312"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </UserControl.Resources>
	<UserControl.Triggers>
        <EventTrigger RoutedEvent="Mouse.MouseEnter">
            <BeginStoryboard Storyboard="{StaticResource MouseOver}" x:Name="MouseOver_BeginStoryboard"/>
        </EventTrigger>
        <EventTrigger RoutedEvent="Mouse.MouseLeave">
            <BeginStoryboard Storyboard="{StaticResource MouseLeave}"  x:Name="MouseLeave_BeginStoryboard"/>
        </EventTrigger>
    </UserControl.Triggers>

	<Grid x:Name="LayoutRoot" RenderTransformOrigin="0.5,0.5">
		<Grid.RenderTransform>
			<TransformGroup>
				<ScaleTransform ScaleX="1" ScaleY="1"/>
				<SkewTransform AngleX="0" AngleY="0"/>
				<RotateTransform Angle="0"/>
				<TranslateTransform X="0" Y="0"/>
			</TransformGroup>
		</Grid.RenderTransform>
		<Ellipse Name="Ellipse" >
			<Ellipse.Fill>
				<RadialGradientBrush GradientOrigin="0.258,0.21">
					<GradientStop x:Name="OuterColor" Offset="0.9"/>
					<GradientStop x:Name="InnerColor" Offset="0.312"/>
					<GradientStop Color="#FFFFFFFF" Offset="0"/>
				</RadialGradientBrush>
			</Ellipse.Fill>
		</Ellipse>
	</Grid>
</UserControl>